<template>
  <div class="content">
    <div class="example-wrapper">
      <div class="header">
        <span class="time">{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</span>
        <!-- <h1>计划排缸看板</h1> -->
        <!-- <button v-on:click="onUpdateSomeValues()">Update Some D &amp; E Values</button> -->
      </div>
      <AgGridVuesCopys :rowHeight="33" :headerHeight="33"
        style="width: 100%; height: 300px; margin-bottom: 30px"
        class="ag-theme-alpine"
        :columnDefs="columnDefs"
        @grid-ready="onGridReady"
        :defaultColDef="defaultColDef"
        :rowData="rowData"
      ></AgGridVuesCopys>
      <div class="echartsContent">
        <div ref="letfMain" class="letfMain"></div>
        <div ref="rightMain" id="rightMain" class="rightMain"></div>
      </div>
    </div>
  </div>
</template>
    <script setup lang="ts">
import { reactive, ref } from 'vue'

import dayjs from 'dayjs'
import * as echarts from 'echarts'
const gridApi = ref<any>(null)
const columnApi = ref<any>(null)
const letfMain = ref<any>()
const rightMain = ref<any>()
let myChart1Init: any
const myChartInit = ref<any>()

let defaultColDef = reactive<any>({
  flex: 1,
  minWidth: 120,
  resizable: true,
  cellClass: 'align-right',
  valueFormatter: (params: any) => {
    return formatNumber(params.value)
  },
})
const rowData = ref<any>(null)
const arr = ref([
  {
    name: '出缸缸数',
    type: 'line',
    stack: 'Total',
    data: [120, 132, 101, 134, 90, 230, 210],
  },
  {
    name: '排缸数',
    type: 'line',
    stack: 'Total',
    data: [220, 182, 191, 234, 290, 330, 310],
  },
])
const optionnmb = reactive<any>({
  title: {
    text: '',
  },
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['出缸缸数', '排缸数'],
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2023-3-10', '2023-3-9', '2023-3-8', '2023-3-7', '2023-3-6', '2023-3-5', '2023-3-4'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      name: '出缸缸数',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210],
    },
    {
      name: '排缸数',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310],
    },
  ],
})
const arr1 = ref([
  { product: '2023-3-10', 出缸缸数: 43.3, 排缸数: 85.8 },
  { product: '2023-3-9', 出缸缸数: 83.1, 排缸数: 73.4 },
  { product: '2023-3-8', 出缸缸数: 86.4, 排缸数: 65.2 },
  { product: '2023-3-6', 出缸缸数: 72.4, 排缸数: 53.9 },
  { product: '2023-3-5', 出缸缸数: 72.4, 排缸数: 53.9 },
  { product: '2023-3-4', 出缸缸数: 72.4, 排缸数: 53.9 },
  { product: '2023-3-3', 出缸缸数: 72.4, 排缸数: 53.9 },
])
onMounted(() => {
  rowData.value = createRowData()
  getEcharts()
  getEcharts1()
  setInterval(() => {
    onUpdateSomeValues()
    for (var i = 0; i < arr1.value.length; ++i) {
      arr1.value[i].出缸缸数 = Math.random() * 2000
      arr1.value[i].排缸数 = Math.random() * 2000
    }
    console.log(arr1.value)
    myChartInit.value.setOption({
      dataset: {
        source: arr1.value,
      },
    })
    myChart1Init.clear()
    myChart1Init = echarts.init(rightMain.value)
    optionnmb.series[0].data.map((pve: any, index: number) => {
      optionnmb.series[0].data.fill(Math.floor(Math.random() * 2000), index, index + 1)
    })
    optionnmb.series[1].data.map((pve: any, index: number) => {
      optionnmb.series[1].data.fill(Math.floor(Math.random() * 2000), index, index + 1)
    })
    nextTick(() => {
      myChart1Init.setOption(optionnmb, true)
    })
  }, 5000)
})
const getEcharts = () => {
  myChartInit.value = echarts.init(letfMain.value)
  let option = {
    legend: {},
    tooltip: {},
    dataset: {
      dimensions: ['product', '出缸缸数', '排缸数'],
      source: arr1.value,
    },
    xAxis: { type: 'category' },
    yAxis: {
      animationDuration: 300,
      animationDurationUpdate: 300,
    },
    series: [{ type: 'bar' }, { type: 'bar' }],
    animationDuration: 0,
    animationDurationUpdate: 800,
  }
  myChartInit.value.setOption(option)
}
const getEcharts1 = () => {
  myChart1Init = echarts.init(rightMain.value)
  myChart1Init.setOption(optionnmb)
}
const numberValueParser = (params: any) => {
  return Number(params.newValue)
}
const createRowData = () => {
  const rowData = []
  for (let i = 0; i < 20; i++) {
    rowData.push({
      a: Math.floor(((i + 323) * 25435) % 10000),
      b: Math.floor(((i + 323) * 23221) % 10000),
      c: Math.floor(((i + 323) * 468276) % 10000),
      d: 0,
      e: 0,
    })
  }
  return rowData
}
const onUpdateSomeValues = () => {
  const rowCount = gridApi.value.getDisplayedRowCount()
  //   console.log(rowCount)
  //   获取数组有几个下标 20
  for (let i = 0; i < 10; i++) {
    const row = Math.floor(Math.random() * rowCount)
    // 获取随机下标
    //   console.log(row)
    const rowNode = gridApi.value.getDisplayedRowAtIndex(row)
    //拿到此下标的实例
    //   console.log(rowNode)
    //进行下标单元格赋值
    rowNode.setDataValue('a', Math.floor(Math.random() * 10000))
    rowNode.setDataValue('b', Math.floor(Math.random() * 10000))
    rowNode.setDataValue('c', Math.floor(Math.random() * 10000))
    rowNode.setDataValue('d', Math.floor(Math.random() * 10000))
    rowNode.setDataValue('e', Math.floor(Math.random() * 10000))
  }
}
const onGridReady = (params: any) => {
  gridApi.value = params.api
  columnApi.value = params.columnApi
}
const formatNumber = (number: any) => {
  // this puts commas into the number eg 1000 goes to 1,000,
  // i pulled this from stack overflow, i have no idea how it works
  return Math.floor(number)
    .toString()
    .replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
const columnDefs = reactive<any>([
  {
    headerName: '设备编号',
    field: 'a',
    valueParser: numberValueParser,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: '设备容量',
    field: 'b',
    // editable: true,
    valueParser: numberValueParser,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: '排产缸数',
    field: 'c',
    valueParser: numberValueParser,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: '排重量',
    field: 'd',
    minWidth: 140,
    valueParser: numberValueParser,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: '出缸缸数',
    field: 'e',
    minWidth: 140,
    valueParser: numberValueParser,
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  {
    headerName: '出缸重量',
    minWidth: 140,
    valueGetter: 'data.a + data.b + data.c + data.d + data.e',
    cellRenderer: 'agAnimateShowChangeCellRenderer',
  },
  //   {
  //     headerName: 'Average',
  //     minWidth: 140,
  //     valueGetter: '(data.a + data.b + data.c + data.d + data.e) / 5',
  //     cellRenderer: 'agAnimateSlideCellRenderer',
  //   },
])
</script>
    <style scoped>
.content {
  width: 100%;
  height: 100%;
  background: #fff;
}

.header {
  display: flex;
  align-items: center;
}
.time {
  font-size: 18px;
  font-weight: 600;
  margin: 20px 50px 20px 20px;
}
.echartsContent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 350px;
}
.letfMain {
  width: 48%;
  height: 100%;
}
.rightMain {
  width: 48%;
  height: 100%;
}
</style>
    